<template>
  <a-modal
    title="编辑知识"
    class="edit-knowledge-modal"
    :width="800"
    :visible="visible"
    @ok="addKnowledge"
    @cancel="closeModal"
  >
    <div v-if="!knowledgeId" class="edit-knowledge-modal-li">
      <span class="edit-knowledge-modal-li-title">请选择类型：</span>
      <a-select v-model:value="menuFrom.menuId" style="width: 250px">
        <a-select-opt-group v-for="menu in menuList" :key="menu.menuId" :label="menu.menuName">
          <a-select-option v-for="item in menu.secondLevelMenus" :key="item.menuId"
            >{{ item.menuName }}
          </a-select-option>
        </a-select-opt-group>
      </a-select>
    </div>
    <div class="edit-knowledge-modal-li">
      <span class="edit-knowledge-modal-li-title">知识标题：</span
      ><a-input v-model:value="menuFrom.title" style="width: 50%" />
    </div>
    <div class="edit-knowledge-modal-li">
      <span class="edit-knowledge-modal-li-title">知识内容：</span
      ><a-textarea
        v-model:value="menuFrom.content"
        style="width: calc(100% - 140px)"
        :auto-size="{ minRows: 5, maxRows: 20 }"
      />
    </div>
    <div class="edit-knowledge-modal-li">
      <span class="edit-knowledge-modal-li-title">素材：</span>
      <uploadImage :file-list="fileList" :image-count="8" @editFile="editFile" />
    </div>
  </a-modal>
</template>
<script lang="ts">
import { defineComponent, inject, reactive, ref, watch } from 'vue'
import { message } from 'ant-design-vue'
import common from '@/api/common'
import UploadImage from '@/components/upload/UploadImage.vue'

interface menu {
  menuId: number
  menuName: string
  secondLevelMenus: Array<{ menuId: number; menuName: string }>
}
interface FileItem {
  uid: string
  name?: string
  status?: string
  response?: string
  percent?: number
  url?: string
  preview?: string
  originFileObj?: any
}
export default defineComponent({
  components: {
    UploadImage
  },
  emits: ['getContentList'],
  setup(props, content) {
    const knowledgeId = inject<any>('knowledgeId')
    const visible = inject<any>('addKnowledgeState')
    /**
     * 关闭窗口
     */
    const closeModal = inject<any>('closeaddKnowledgeModal')
    const menuList = ref<Array<menu>>([])
    const fileList = ref<FileItem[]>([])
    const menuFrom = reactive({ menuId: '', title: '', content: '', pictures: [] })
    watch(visible, async (now) => {
      if (now) {
        if (knowledgeId) {
          // 编辑
          common.getKnowledgeDetail({ contentId: knowledgeId.value }).then((res) => {
            if (res.data.title) {
              menuFrom.title = res.data.title
            }
            if (res.data.content) {
              menuFrom.content = res.data.content
            }
            if (res.data.pictures && res.data.pictures.length > 0) {
              menuFrom.pictures = res.data.pictures.map((item: { id: number; url: string }) => {
                return item.url
              })
              fileList.value = menuFrom.pictures.map((item) => {
                return { uid: item, url: item }
              })
            }
          })
        } else {
          // 获取菜单
          await common.getMenuAll().then((res) => {
            if (res.data && res.data.length > 0) {
              menuList.value = res.data
            }
          })
        }
      } else {
        // 清除表单数据
        menuFrom.menuId = ''
        menuFrom.title = ''
        menuFrom.content = ''
        menuFrom.pictures = []
        fileList.value = []
      }
    })
    const editFile = (data: FileItem[]) => {
      fileList.value = data
      if (fileList.value.length > 0) {
        ;(menuFrom.pictures as string[]) = fileList.value.map((item) => {
          return item.uid
        })
      } else {
        menuFrom.pictures = []
      }
    }
    const addKnowledge = () => {
      if (knowledgeId) {
        common
          .updateQuestion({
            contentId: knowledgeId.value,
            title: menuFrom.title,
            content: menuFrom.content,
            pictures: menuFrom.pictures
          })
          .then(() => {
            content.emit('getContentList')
            closeModal()
            message.success('修改成功')
          })
      } else {
        common
          .addQuestion(menuFrom)
          .then(() => {
            closeModal()
            message.success('添加成功')
          })
          .catch(() => {
            // console.log(error)
          })
      }
    }
    return {
      knowledgeId,
      visible,
      closeModal,
      menuList,
      menuFrom,
      fileList,
      editFile,
      addKnowledge
    }
  }
})
</script>

<style lang="scss" scoped>
.edit-knowledge-modal {
  &-li {
    margin: 10px 0;
    display: flex;
    align-items: center;
    &-title {
      display: inline-block;
      width: 100px;
    }
  }
}
</style>
